<template>
  <div id="JsonDemo" v-cloak>

    <div style="margin: 30px;"></div>
    <h2>商品后台管理</h2>

    <el-row :gutter="24">
      <el-col :span="24">
        <div class="grid-content bg-purple">

          <el-table :data="this.list" style="width: 100%; padding: 20px;" >
            <el-table-column label="编号" width="80">
              <template slot-scope="{ $index }">
                {{ $index + 1 }}
              </template>
            </el-table-column>
            <el-table-column prop="name" label="产品名称" width="250"></el-table-column>
            <el-table-column prop="price" label="价格" width="180"></el-table-column>
            <el-table-column label="标签" width="180">
              <template slot-scope="{ row }">
                <el-tag v-if="row.tag === 'Apple'">Apple</el-tag>
                <el-tag v-else-if="row.tag === 'Huawei'" type="success">Huawei</el-tag>
                <el-tag v-else-if="row.tag === 'Redmi'" type="danger">Redmi</el-tag>
                <span v-else>{{ row.tag }}</span>
              </template>
            </el-table-column>
            <el-table-column label="图片" width="180">
              <template slot-scope="{ row }">
                <el-image :src="require('@/assets/' + row.pic)" class="image" style="height: 50px;"></el-image>
              </template>
            </el-table-column>
            <el-table-column label="操作">
              <template slot-scope="{ row }">
                <el-button type="danger" plain size="mini" @click="deleteRow(row)">删除这个商品</el-button>
              </template>
            </el-table-column>
          </el-table>

        </div>
      </el-col>


<!--       <el-col :span="8">

        <div class="grid-content bg-purple">
          <el-card class="box-card" style="margin-top: 60px;">
            <h4 style="margin: 10px;">添加商品</h4><br>

            <el-form ref="formLabelAlign" :label-position="labelPosition" label-width="50px" :model="formLabelAlign"
              v-model="labelPosition">
              <el-form-item label="名称">
                <el-input v-model="formLabelAlign.name" placeholder="请输入产品名称" clearable="true"></el-input>
              </el-form-item>
              <el-form-item label="价格">
                <el-input placeholder="请输入价格" type="number" v-model="formLabelAlign.price"></el-input>
              </el-form-item>
              <el-form-item label="品牌">
                <el-select v-model="formLabelAlign.tag" placeholder="请选择手机品牌" style="width: 100%;">
                  <el-option value="Redmi">Redmi</el-option>
                  <el-option value="Apple">Apple</el-option>
                  <el-option value="Huewei">Huewei</el-option>
                </el-select>
              </el-form-item>
              <el-form-item label="图片">
                <el-upload class="upload-demo" :action="uploadUrl" :on-success="handleSuccess" :file-list="fileList"
                  :limit="1" list-type="picture">
                </el-upload>

              </el-form-item>

              <el-button @click="addItem" :plain="true">立即添加</el-button>

            </el-form>

          </el-card>
        </div>
      </el-col> -->
    </el-row>


<!--     <div class="add">
      名称：<input type="text" v-model="name">
      价格：<input type="text" v-model="price">
      品牌：<input type="text" v-model="tag">
      图片：<input type="text" v-model="pic">
      <input type="button" value="添加" @click=addItem()>
    </div> -->



  </div>
</template>

<script>
export default {
  name: "JsonDemo",
  data() {
    return {
      name: '',
      list: [],

      formLabelAlign: {
        name: '',
        price: '',
        tag: '',
        pic: ''
      },
    }
  },
  created() {
    this.$axios.get("http://localhost:3000/product").then(res => {
      this.list = res.data
      console.log(res)
    })
      .catch(error => {
        console.log(error);
      })
  },
  methods: {
    // 获取数据
    getData() {
      this.$axios.get('http://localhost:3000/product')
        .then((res) => {
          const { status, data } = res;
          if (status === 200) {
            this.list = data;
          }
        })
        .catch((err) => {
        })
    },
    deleteRow(row) {

      this.$confirm('确定删除这个商品吗?', '提示', {
        confirmButtonText: '确定',
        cancelButtonText: '取消',
        type: 'error'
      }).then(() => {
        const index = this.list.indexOf(row);
        if (index !== -1) {
          this.list.splice(index, 1);
        }

        this.$axios.delete('http://localhost:3000/product/' + row.id)
          .then((res) => {
            console.log(res);
            this.getData()
          })

        this.$message({
          type: 'success',
          message: '删除成功!'
        });
      }).catch(() => {
        this.$message({
          type: 'info',
          message: '已取消操作'
        });
      });

    }

  }
}
</script>

<style>

</style>
